<!--
 * @Description: 海康播放器
 * @Author: huacong
 * @Date: 2020-12-02 10:28:44
 * @LastEditTime: 2020-12-02 18:01:40
 * @LastEditors: huacong
-->
<template lang="pug">
  .h.wrapper
    el-card.tableFilter.boxCard(header="视频信息查询" v-if="(playMode === 3 || playMode === 4) && inType !== 1")
      form-box(
        :items="filterItems"
        :isFilter="true"
        :searchHandle="searchHandle"
      )
    el-card.tableInnerWrapper.boxCard(style="flex: 1" :body-style="{flex: 1}")
      div(slot="header")
        h2 视频查看
        .table-operator(v-if="playMode === 2")
          el-button(size="small" type="success" @click="linkHandle") 确认关联
      el-row.h(:gutter="12")
        //- 关联视频回放,不显示机构树，只显示设备选择框
        el-col.h(:span="6" v-loading="orgTreeObj.loading" v-if="playMode !== 3 || inType === 1")
          el-card.h(:body-style="{flex: 1, display: 'flex', 'flex-direction': 'column', height: '100%','box-sizing': 'border-box'}")
            el-input(
              class="mb10 filterInput"
              placeholder="输入机构名称"
              v-model="orgTreeObj.filterText"
            )
            div(style="flex: 1")
              el-scrollbar.h(
                class="scrollWrapper"
                wrap-class="scroll__wrap"
                view-class="scroll__view"
                :native='false'
                :noresize='false'
              )
                el-tree(
                  ref="tree"
                  :data="orgTreeObj.data"
                  node-key="id"
                  default-expand-all
                  :filter-node-method="orgFilterNode"
                  @node-click="orgChose"
                )
        el-col.h.pr(:span="playMode === 3 && inType !== 1 ? 24 : 18")
          video-play
</template>
<script>
import { VideoPlay, FormBox } from '@/components'
import { getQueryString } from '@/utils/util'
import { getMonitorOrgListTree } from '@/api/minitor'

export default {
  components: {
    VideoPlay,
    FormBox
  },
  props: {
    // 进入方式，1-视频回放，2-卫宁跳转
    inType: {
      type: Number,
      default: 2
    }
  },
  watch: {
    'orgTreeObj.filterText' (val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {
    query () {
      const query = getQueryString('query')
      return query ? JSON.parse(query) : {}
    },
    playMode () {
      // 1-视频预览,2-视频关联，3-关联视频回放，4-普通视频回放
      return this.query.playMode ? parseInt(this.query.playMode) : 1
    },
    filterItems () {
      const { playMode } = this
      if (playMode === 3) {
        return [
          {
            key: 'violationInformationType',
            label: '选择设备',
            type: 'selectdict',
            dictKey: 'ViolationInformationType'
          }
        ]
      }
      return [
        {
          key: 'time',
          label: '选择时间',
          type: 'datetime'
        }
      ]
    }
  },
  data () {
    return {
      orgTreeObj: {
        data: [], // 机构数数据
        filterText: '', // 删选文字
        loading: false
      },
      orgInfo: {}, // 当前选择设备对象
      linkList: [],
      filterData: {} // 删选数据
    }
  },
  created () {
    console.log(getQueryString('query'))
  },
  methods: {
    // 获取左边机构树
    getOrgTree () {
      this.orgTreeObj.loading = true
      getMonitorOrgListTree({ pid: '' }).then(res => {
        this.orgTreeObj.data = res.data || []
        this.orgInfo.deviceCode = res.deviceCode || ''
        this.orgInfo.cameraIndexCode = res.cameraIndexCode || ''
        this.orgInfo.orgId = res.orgId || ''
      }).finally(() => {
        this.orgTreeObj.loading = false
      })
    },
    // 机构删选
    orgFilterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 机构树点击选择
    orgChose (e) {
      if (e.xtype === 2 && e.cameraIndexCode) {
        if (e.id) {
          this.orgInfo.deviceCode = e.id
        }
        this.orgInfo.cameraIndexCode = e.cameraIndexCode
        // 判断是否是关联视频页面， 如果是，收集数据
        if (this.playMode === 3 && !this.linkList.includes(e.cameraIndexCode)) {
          this.linkList.push(e)
        }
      }
    },
    // 视频搜索
    searchHandle (vals) {
      console.log(vals)
    },
    // 视频关联
    linkHandle () {
      const callBackUrl = this.query.callBackUrl
      if (!callBackUrl) {
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .tableInnerWrapper {
    display: flex;
    flex-direction: column;

  }

  .tableFilter {
    + .tableInnerWrapper {
      margin-top: 12px
    }
  }
}
</style>
